<template>
  <div class="all">
    <div class="a-nav">
      <el-select v-model="condition.status" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div>
      <el-table :data="list" :header-cell-style="{background:'#eef3f7'}">
        <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
        <el-table-column align="center" prop="realName" label="真实姓名"></el-table-column>
        <el-table-column align="center" prop="idCardNum" label="证件号码"></el-table-column>
        <el-table-column align="center" label="证件正面">
          <template slot-scope="scope">
            <el-image :src="scope.row.idCardFront" class="idCard" :preview-src-list="getImgList(scope.row.idCardFront)"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="证件背面">
          <template slot-scope="scope">
            <el-image :src="scope.row.idCardBack" class="idCard"  :preview-src-list="getImgList(scope.row.idCardBack)"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addTime" label="提交时间"></el-table-column>
        <el-table-column align="center" prop="" label="认证状态">
          <template slot-scope="scope">
            {{scope.row.status}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="checkTime" label="处理时间" v-if="condition.status!='审核中'" ></el-table-column>
        <el-table-column align="center" prop="checkUser" label="处理人" v-if="condition.status!='审核中'"></el-table-column>
        <el-table-column align="center" label="操作" v-else>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="Submit(scope.row)">通过</el-button>
            <el-button type="danger" size="mini" @click="shop=true,result.id=scope.row.id">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @current-change="handleCurrentChange"
            :current-page="condition.pageIndex"
            :page-size="condition.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>
    </div>
    <el-dialog width="20%" title="失败原因" :visible.sync="shop">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        clearable
        resize='none'
        v-model="result.reason">
      </el-input>
      <div style="text-align: center;"><el-button type="danger" @click="refuse">不通过</el-button></div>
    </el-dialog>
  </div>
</template>

<script>
  import {realNameAuth,deal} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
     inject:["reload"],
    data(){
      return{
        options:[
        {value:'审核中'},
        {value:'认证通过'},
        {value:'认证未通过'}],
        result:{
          status:'',
          reason:''
        },
        list:[],
        shop:false,
        condition:{
          quantity:10,
          pageNum:1,
          pageSize:10,
          status:'审核中',
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
        },
      }
    },
    methods:{
      postList(){
        realNameAuth(this.condition).then(res=>{
          this.list=res.data.realNameAuthList
          this.condition.quantity=res.data.total
        })
      },
        //翻页
       handleCurrentChange(val) {
         this.condition.pageNum=val
         this.postList()

      },
      //预览
         getImgList(index){
               let images=[]
               images.push(index)
              return images
          },
      //提交
      Submit(e){
        var _this=this
        this.$confirm('确认用户-'+e.realName+'-认证通过','系统提示',{
          confirmButtonText:'同意',
          cancelButtonText:'取消'
        }).then(()=>{
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            status:'认证通过',
            id:e.id
          }
          deal(data).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              _this.reload()
            }
          })
        })
      },
      //拒绝
      refuse(){
        if(this.result.reason){
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            status:"认证未通过",
            id:this.result.id,
            reason:this.result.reason
          }
          deal(data).then(res=>{
            if(res.code==0){
              this.reload()
              this.$message.success('操作成功')
            }
          })
        }else{
          this.$message.error('说明原因')
        }

      }
    },
    mounted() {
      this.postList()
    },
    watch:{
      'condition.status':{
        handler(val, oldVal){
                    this.condition.pageNum=1
                    this.postList()
                  },
             deep:true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .a-nav{margin: 5px 0;}
.el-select{
  width: 200px;
  /deep/ .el-input{
    width: 100%;
  }
}

.idCard{
  width: 150px;
  height: 100px;
}
 .el-textarea{
        width: 80%;
        margin: 2% auto;
        display: block;
  }

</style>
